<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	<script src="jquery-1.11.1.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
		var gSocketIo = io.connect();
		var gLayout = {};

		$(document).ready(function() {

			gSocketIo.on('layout', function (str) {
				if (('$' != str.charAt(0)) || ('$' != str.charAt(str.length - 1))) {
					alert('packet error :', str);
					return false;
				}
				//console.log(str);

				var curIdx = 1, findIdx;

				findIdx = str.indexOf(':', curIdx);
				//cmdPacket = str.substr(curIdx, findIdx-curIdx);
				curIdx = findIdx + 1;

				findIdx = str.indexOf(',', curIdx);
				gLayout.cx = Number(str.substr(curIdx, findIdx-curIdx));
				curIdx = findIdx + 1;

				findIdx = str.indexOf(',', curIdx);
				gLayout.cy = Number(str.substr(curIdx, findIdx-curIdx));
				curIdx = findIdx + 1;

				findIdx = str.indexOf(',', curIdx);
				gLayout.row = Number(str.substr(curIdx, findIdx-curIdx));
				curIdx = findIdx + 1;

				findIdx = str.indexOf(',', curIdx);
				gLayout.column = Number(str.substr(curIdx, findIdx-curIdx));
				curIdx = findIdx + 1;

				gLayout.Buttons = new Array();
				var btnIdx = 0;
				while (true) {
					findIdx = str.indexOf('[', curIdx);
					if (0 > findIdx) {
						break;
					}
					curIdx = findIdx + 1;

					var button = {};

					findIdx = str.indexOf(',', curIdx);
					button.cid = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.bid = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.rid = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.name = str.substr(curIdx, findIdx-curIdx);
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.notUsed = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.pos = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.x = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.y = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.cx = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.cy = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.rtype = Number(str.substr(curIdx, findIdx-curIdx));
					if (button.rtype) {
						button.flagRemote = parseInt(button.rtype / 100);
						button.isHeating = parseInt(button.rtype / 10) % 10;
					}
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					button.status = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					//console.log(button);
					gLayout.Buttons.push(button);
				}

				if (gLayout.Buttons.length) {
					initLayout(gLayout);
				} else {
					//document.body.innerHTML = str;
					$('body').empty();
					$('<div />').attr('align', 'center').appendTo('body');
					$('div').append(function (index) {
						return '<h1>장비 연결을 확인하세요<h1>';
					});
				}

				var url = document.URL;
				findIdx = url.lastIndexOf('?id=');
				if (-1 < findIdx) {
					gSocketIo.emit('layout', str + url.substr(findIdx + 4));
				} else {
					gSocketIo.emit('layout', str);
				}
			});
			
			gSocketIo.on('nodevice', function (str) {
				$('body').empty();
				$('<div />').attr('align', 'center').appendTo('body');
				$('div').append(function (index) {
					return '<h1>장비 연결을 확인하세요<h1>';
				});

				gSocketIo.emit('nodevice', str);
			});

			gSocketIo.on('update', function (str) {
				if (('$' != str.charAt(0)) || ('$' != str.charAt(str.length - 1))) {
					alert('packet error :', str);
					return false;
				}
				//console.log(str);

				var curIdx = 1, findIdx;

				findIdx = str.indexOf(':', curIdx);
				//cmdPacket = str.substr(curIdx, findIdx-curIdx);
				curIdx = findIdx + 1;
				
				while (true) {
					findIdx = str.indexOf('[', curIdx);
					if (0 > findIdx) {
						break;
					}
					curIdx = findIdx + 1;

					var cid, bid, rid, status;

					findIdx = str.indexOf(',', curIdx);
					cid = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					bid = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					rid = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					findIdx = str.indexOf(',', curIdx);
					status = Number(str.substr(curIdx, findIdx-curIdx));
					curIdx = findIdx + 1;

					var imgSrc = findImg(status);
					if (imgSrc.length) {
						for (var i=0; i<gLayout.Buttons.length; i++) {
							if ((gLayout.Buttons[i].cid == cid)
								&& (gLayout.Buttons[i].bid == bid)
								&& (gLayout.Buttons[i].rid == rid)) {
								gLayout.Buttons[i].status = status;
								if ((0x01 == status) && gLayout.Buttons[i].rtype) {
									imgSrc = 'img/status_ready.png';
								}
								$('img').eq(gLayout.Buttons[i].pos).attr('src', imgSrc);
								break;
							}
						}
					}
				}

				gSocketIo.emit('update', str);
			});
			
			gSocketIo.on('temperature', function (str) {
				if (('$' != str.charAt(0)) || ('$' != str.charAt(str.length - 1))) {
					alert('packet error :', str);
					return false;
				}
				//console.log(str);

				var curIdx = 1, findIdx;
				var curValue, setValue;

				findIdx = str.indexOf(':', curIdx);
				//cmdPacket = str.substr(curIdx, findIdx-curIdx);
				curIdx = findIdx + 1;

				findIdx = str.indexOf(',', curIdx);
				curValue = Number(str.substr(curIdx, findIdx-curIdx));
				curIdx = findIdx + 1;

				findIdx = str.indexOf(',', curIdx);
				setValue = Number(str.substr(curIdx, findIdx-curIdx));
				curIdx = findIdx + 1;

				var nowDate = new Date();
				var str = "Temperature updated : " + nowDate.toLocaleString();
				$("#div-1").text(str);
				str = "PV : " + curValue/10 + ", SV : " + setValue/10;
				$("#div-2").text(str);

				gSocketIo.emit('temperature', str);
			});
		});
		
		function initLayout(layout) {
			//console.log(layout);

			$('body').empty();

			var html = '';
			html += '<h1></h1><br>';
			html += '<table border="1px" align="center">';
			for (var r=0; r<(layout.row<<1); r++) {
				html += '<tr>';
				for (var c=0; c<layout.column; c++) {
					var idx = parseInt(r/2)*layout.column + c;
					if (layout.Buttons.length > idx) {
						html += '<td align="center">';
						if (layout.Buttons[idx].pos == idx) {
							if (0 == (r%2)) {
								var imgSrc = findImg(layout.Buttons[idx].status, layout.Buttons[idx].rtype);
								if (imgSrc.length) {
									html += '<img src="' + imgSrc + '" pos="' + idx + '" />';
								}
							} else {
								html += layout.Buttons[idx].name;
							}
						}
						html += '</td>';
					}
				}
				html += '</tr>';
			}
			html += '</table>';
			html += '<h5></h5><br>';
			html += '<div id="div-1" align="center"></div>';
			html += '<div id="div-2" align="center"></div>';
			document.body.innerHTML = html;

			$('img').click(function () {
				var curIdx = 0, findIdx;

				var pos = $(this).attr('pos');
				var status = -1;
				switch (gLayout.Buttons[pos].status) {
				case 0x00:	// OFF
					status = 0x01;	// ON
					break;
				case 0x01:	// ON
					if (gLayout.Buttons[pos].rtype) {
						status = gLayout.Buttons[pos].isHeating ? 0x04 : 0x03;	// HEATING, COOLING
					} else {
						status = 0x00;	// OFF
					}
					break;
				case 0x02:	// AIR
					if (gLayout.Buttons[pos].rtype) {
						status = 0x00;	// OFF
					}
					break;
				case 0x03:	// COOLING
				case 0x04:	// HEATING
					if (gLayout.Buttons[pos].rtype) {
						if (gLayout.Buttons[pos].flagRemote) {
							// off - on - cooling/heating - off
							status = 0x00;	// OFF
						} else {
							// off - on - cooling/heating - air - off
							status = 0x02;	// AIR
						}
					}
					break;
				case 0x20:	// PENDING
					alert('처리중입니다...');
					break;
				case 0x40:	// UNKNOWN
					alert('장비오류 확인바랍니다!!!');
					status = 0x40;	// UNKNOWN // for getStatus
					break;
				}
				if (-1 < status) {
					var cid = gLayout.Buttons[pos].cid;
					var bid = gLayout.Buttons[pos].bid;
					var rid = gLayout.Buttons[pos].rid;
					var setPkt = '$set:[' + cid + ',' + bid + ',' + rid + ',' + status + ',],$';
					console.log('setPkt:' + setPkt);

					gSocketIo.emit('set', setPkt);
				}
			});
		}
		
		function findImg(status, rtype) {
			var imgSrc = '';
			switch (status) {
			case 0x00:	// OFF
				imgSrc = 'img/status_off.png';
				break;
			case 0x01:	// ON
				imgSrc = rtype ? 'img/status_ready.png' : 'img/status_on.png';
				break;
			case 0x02:	// AIR
				imgSrc = 'img/status_air.png';
				break;
			case 0x03:	// COOLING
				imgSrc = 'img/status_cooling.png';
				break;
			case 0x04:	// HEATING
				imgSrc = 'img/status_heating.png';
				break;
			case 0x20:	// PENDING
				imgSrc = 'img/status_pending.png';
				break;
			case 0x40:	// UNKNOWN
				imgSrc = 'img/status_unknown.png';
				break;
			default:
				imgSrc = 'img/status_blank.png';
				break;
			}
			return imgSrc;
		}
		
		function formatTime(minutes) {
			var hour = parseInt(minutes / 60);
			var min = minutes % 60;
			
			var format = hour;
			format += ':';
			if (10 > min) {
				format += '0';
			}
			format += min;
			console.log(hour + ',' + min + ',' + format);

			return format;
		}
	</script>
	<title>CubeControl</title>
</head>
<body>
</body>
</html>
